<template>
	<view>
		<view class="content">
			<view class="content_key">
				<view class="content_fr">
					<pickerAddress @change="change1"><text>{{shipZone1}}</text></pickerAddress>
				</view>
				<image src="../../static/iocn43.png"></image>
				<view class="content_fr">
					<pickerAddress @change="change"><text>{{shipZone}}</text></pickerAddress>
				</view>
			</view>
		</view>
		<view class="content1" v-if="shows">
			<view class="current">最新货源</view>
			<view class="description" v-for="(item,index) in list" :key="index" @click="skip(item)">
				<view class="description_top">
					<view class="fl">
						<text>{{item.shipZone}}</text>
						<image src="../../static/iocn4.png"></image>
						<text>{{item.receiveZone}}</text>
					</view>
					<!-- <view class="fr">2022.10.31 14:28</view> -->
				</view>
				<view class="description_key">
					<text>货物信息：{{item.goodsName}} / {{item.goodsPackagMethod}} / {{item.goodsSize}} /{{item.goodsWeight}} </text>
					<text>车辆信息：{{item.lesscarload}} / {{item.demandLength}} / {{item.demandLoad}} /{{item.demandStyle}}</text>
					<view class="money">
						<text>总运费:</text>
						<text style="color: #EF4D3D;font-weight: 600;">{{item.amountTotal}}</text>
						<text>元</text>
					</view>
				</view>
				<view class="description_box">
					<view class="iocn">
						<view class="iocn1">
							<image src="../../static/iocn8.png">
						</view>
						<view class="iocn2">
							<text>货主:{{item.shipContact}}</text>
						</view>
                          <text class="textb" v-if="item.returnDeposit == true">（订金可退还）</text>
                           <text class="textb" v-else>（订金不可退还）</text>
					</view>
					<text class="baojia">报价</text>
				</view>
			</view>
		</view>
		
		<view class="content1" v-if="showss">
			<view class="current">最新货源</view>
			<view class="description" v-for="(item,index) in list1" :key="index" @click="skip(item)">
				<view class="description_top">
					<view class="fl">
						<text>{{item.shipZone}}</text>
						<image src="../../static/iocn4.png"></image>
						<text>{{item.receiveZone}}</text>
					</view>
					<!-- <view class="fr">2022.10.31 14:28</view> -->
				</view>
				<view class="description_key">
					<text>货物信息：{{item.goodsName}} / {{item.goodsPackagMethod}} / {{item.goodsSize}} /{{item.goodsWeight}} </text>
					<text>车辆信息：{{item.lesscarload}} / {{item.demandLength}} / {{item.demandLoad}} /{{item.demandStyle}}</text>
					<view class="money">
						<text>总运费:</text>
						<text style="color: #EF4D3D;font-weight: 600;">{{item.amountTotal}}</text>
						<text>元</text>
					</view>
				</view>
				<view class="description_box">
					<view class="iocn">
						<view class="iocn1">
							<image src="../../static/iocn8.png">
						</view>
						<view class="iocn2">
							<text>货主:{{item.shipContact}}</text>
						</view>
		             <text class="textb" v-if="item.returnDeposit == true">（订金可退还）</text>
		              <text class="textb" v-else>（订金不可退还）</text>
					</view>
					<text class="baojia">报价</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetNewShipbill
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				shipZone: '请点击进行选择', //所在地区
				shipZone1: '请点击进行选择', //所在地区
				list: [],
				list1:[],
				skipCount: 0,
				maxResultCount: 10,
				placeShip: '',
				placeShip1: '',
				shows:true,
				showss:false
			};
		},
		onLoad() {
			this.GetNewShipbill()
		},
			
		methods: {
			skip(e) {
				
				var id = e.id
				
					uni.navigateTo({
						url: '/pages/quotedprice/sjDetailspage?id=' + id
					})
				
			},
			change(data) {
				this.shipZone = data.data.join('')
					this.kaishishous()
				 this.shows=false
				 this.showss=true
			},
			change1(data) {
				this.shipZone1 = data.data.join('')
			},
			// 获取最新报价
			async GetNewShipbill() {
				var skipCount = this.skipCount
				var maxResultCount = this.maxResultCount
				var driverId=getValue('id')
				var isRoute=1
				try {
					const {
						data: res
					} = await GetNewShipbill({
						skipCount,
						maxResultCount,
						driverId,
						isRoute
					})
					this.list = res.result.items
					console.log(this.list)
				} catch (e) {}
			},
			
			// 搜索报价
			async kaishishous(){
				var placeShip = this.shipZone1
				var placeRcv=this.shipZone
				var skipCount = this.skipCount
				var maxResultCount = this.maxResultCount
				var keywords=this.shipZone
				var driverId=getValue('id')
				var isRoute=1
				console.log(keywords)
				try {
					const {
						data: res
					} = await GetNewShipbill({
						skipCount,
						maxResultCount,
						placeShip,
						placeRcv,
						keywords,
						driverId,
						isRoute
						
					})
					console.log(res)
					this.list1 = res.result.items
				} catch (e) {}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 15upx;
	}

	.content {
		width: 100%;
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		background-color: #fff;
		padding: 0 20upx;
		background-color: #EF4D3D;

		.content_key {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 105upx;
			background-color: #EF4D3D;
			color: #FFFFFF;

			image {
				width: 100upx;
				height: 100upx;
				margin: 0 20upx;
			}

			.content_fr {
				display: flex;
				align-items: center;
				justify-content:space-between;
				text {
					display: block;
					text-align: center;
					font-size: 28upx;
					width: 270upx;
				}
				
				input {
					font-size: 28upx;
					text-align: center;
				}
			}
		}
	}

	.content1 {
		width: 721.96upx;
		opacity: 1;
		border-radius: 17.52upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc, 1.75upx 1.75upx 7.01upx 0px #cccccc;
		margin: 0 auto;
		margin-top: 20upx;

		.current {
			font-size: 31.54upx;
			font-weight: bold;
			line-height: 47upx;
			padding-top: 15upx;
			padding-left: 37upx;
			position: relative;
		}

		.current:after {
			display: block;
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 180.49upx;
			height: 12.27upx;
			opacity: 1;
			background-image: url(../../static/rectangle.png);
			background-size: cover;
			-webkit-background-size: cover;
			-o-background-size: cover;
			background-position: center 0;
			margin-left: -245upx;
			margin-top: 20upx;
		}

		.description {
			margin-top: 20upx;
			border-radius: 17.52upx;
			box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc, 1.75upx 1.75upx 7.01upx 0px #cccccc;
			padding: 0 38upx;

			.description_top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.fl {
					display: flex;
					align-items: center;
                     
					text {
						width: 240upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 26upx;
						font-weight: bold;
						color: #000;
					}

					image {
						width: 109upx;
						height: 109upx;
					}
				}

				.fr {
					font-size: 15.77upx;
					color: rgba(56, 56, 56, 1);
				}
			}

			.description_key {
				margin-top: -30upx;
				padding-bottom: 20upx;
				border-bottom: 2upx solid #e5e5e5;

				text {
					display: block;
					font-size: 21.03upx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
					padding-top: 15upx;
				}
			}

			.description_box {
				padding: 14upx 0;
				display: flex;
				align-items: center;

				.iocn {
					width: 100%;
					display: flex;
					align-items: center;
				}

				.iocn1 {
					image {
						width: 75upx;
						height: 75upx;
					}
				}

				.iocn2 {
					width: 170upx;
					line-height: 30upx;
					text-align: center;

					text {
						width: 170upx;
						font-size: 22.78upx;
						font-weight: 500;
						background-color: #FFFFFF;
						color: rgba(56, 56, 56, 1);
					}
				}

             .textb{
             				   color: #808080;
             				   font-size: 24upx;
             }
				.baojia {
					width: 120upx;
					line-height: 50upx;
					border-radius: 10upx;
					font-size: 32.78upx;
					font-weight: 600;
					text-align: center;
					color: #fff;
					background-color: #EF4D3D;
				}
			}

		}
	}
	
	.money{
		display: flex;
		align-items: center;
	}
</style>
